/** 5. 全局FA同步脚本 */
<template>
  <div class="editor_container">
    <div class="code-container">
      <div class="script-header">
        <a-button
          type="primary"
          :loading="updateLoading"
          @click="onUpdateScript"
          >更新脚本</a-button
        >
      </div>
      <MonacoEditor editorId="faSyncScriptEditor" v-model="script_code" />
    </div>
    <div class="result-container">
      <div class="result-header">
        <h4>执行结果</h4>
        <a-space
          size="middle"
          class="result-header-end"
          v-if="script_id !== -1"
        >
          <a-input
            v-model:value="sync_site_code"
            placeholder="同步站码"
            style="width: 120px; text-align: center"
          >
          </a-input>
          <a-button type="primary" @click="execute">
            <RocketOutlined />
            执行生成
          </a-button>
        </a-space>
      </div>
      <div class="script-body">
        <MonacoEditor
          editorId="faSyncScriptResultEditor"
          v-model="result_code"
          :readOnly="true"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineExpose, createVNode } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { script_execute } from '@/api/script';
import { uploadFile } from '@/api/global.js';
import {
  get_global_config_by_key,
  update_global_config_by_key,
} from '@/utils/storage.js';

const script_id = ref(-1);
const script_code = ref('print("Hello World!")');
const result_code = ref('INSERT ...');

const sync_site_code = ref('');
const script_params_json = ref('');
const updateLoading = ref(false);

// 执行脚本
const execute = async () => {
  try {
    let res = await script_execute(script_id.value, [
      {
        dataType: 'string',
        name: 'website_code',
        value: sync_site_code.value,
        paramType: 1,
      },
    ]);
    result_code.value = res.data;
  } catch (err) {
    message.error('执行脚本失败');
    console.error('generate sql error ->', err);
  }
};

const reload = async () => {
  // 获取全局页面数据
  let script = await get_global_config_by_key('GLOBAL_SYNC_FA_DATA');
  if (script) {
    script_code.value = script.configValue;
    script_id.value = script.extraInfo;
    script_params_json.value = script.paramsJson;
  } else {
    message.error('获取FA同步脚本失败');
  }
};

const onUpdateScript = async () => {
  updateLoading.value = true;
  await update_global_config_by_key(
    'GLOBAL_SYNC_FA_DATA',
    script_code.value,
    script_id.value,
    script_params_json.value
  );
  updateLoading.value = false;
};

onMounted(() => {
  reload();
});

defineExpose({
  reload,
});
</script>

<script>
import MonacoEditor from '@/components/commons/MonacoEditor.vue';
import { Button, Input, Upload, Space } from 'ant-design-vue';
import {
  RocketOutlined,
  UploadOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';

export default {
  name: 'SetFaSyncScript',
  components: {
    MonacoEditor,
    ASpace: Space,
    AButton: Button,
    AInput: Input,
    AUpload: Upload,
    RocketOutlined,
    ExclamationCircleOutlined,
  },
};
</script>

<style lang="scss" scoped>
.editor_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;

  .code-container {
    height: 100%;
    width: 52%;
    display: flex;
    flex-direction: column;
  }

  .script-header {
    height: 50px;
    display: flex;
    align-items: center;
  }

  .script-body {
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .result-container {
    width: 46%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .result-header {
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
  }
}
</style>
